<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VYfUuOXuGGQE6WGQDD1tZLXxBDM4wLTG"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js">
  </script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js">
  </script>
  <script type="text/javascript" src="./markerCluster.js"></script>
  <script type="text/javascript" src="./newJkqJson.js"></script>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div id="map"></div>
  <div id="webview-header">
    <i>&lt;</i>
    <span>地图查询</span>
  </div>
  <div id="webview-search">
    <div>
      <div class="icon">
        <i>&#x26B2;</i>
      </div>
      <input type="text" placeholder="输入企业名称或统一社会信用代码" onkeydown="iptEnter()">
    </div>
    <div class="search-select">
      <div class="search-select-item" onclick="openMask(0)">企业状态<div class="down-icon"> &#x25BC;</div>
      </div>
      <div class="search-select-item" onclick="openMask(1)">行业类型<div class="down-icon"> &#x25BC;</div>
      </div>
      <div class="search-select-item" onclick="openMask(2)">经营地址类型<div class="down-icon"> &#x25BC;</div>
      </div>
    </div>
  </div>
  <div id="webview-footer">
    <div>
      <div class="webview-footer-icon">&#10148;</div>
      <span class="webview-footer-title">制造业</span>
    </div>
    <div class="webview-footer-content">
      为你查到16家企业
      <i>&gt;</i>
    </div>
    <div class="webview-footer-btn">
      查看全部
    </div>
  </div>
  <div id="webview-dialog" onclick="closeMask()">
    <div class="dialog-box" onclick="activeItem()"> </div>
  </div>
  <!-- 弹窗逻辑 -->
  <script type="text/javascript">
    // 动态加载选择项
    (function init() {
      let selectList = [
        ['全部', '状态1', '状态2'],
        ['全部', '类型1', '类型2'],
        ['全部', '地址1', '地址2']
      ]
      const dialogBox = document.getElementsByClassName('dialog-box')[0]
      selectList.forEach(element => {
        let ul = document.createElement('ul')
        ul.className = 'selectItems'
        dialogBox.appendChild(ul)
        element.forEach(child => {
          let li = document.createElement('li')
          if (child === '全部') {
            li.className = 'dialog-box-item active-item'
          } else {
            li.className = 'dialog-box-item'
          }
          li.innerHTML = child
          ul.appendChild(li)
        });
      });
    })()

    // 搜索内容，全局储存
    var searchForm = {
      iptVal: '',
      slt1Val: '',
      slt2Val: '',
      slt3Val: '',
    }

    // 搜索逻辑
    function searchSubmit(obj) {
      let form = {
        ...searchForm,
        ...obj
      }
      searchForm = {
        ...form
      }
      console.log(form)
    }

    // 打开弹窗
    function openMask(index = 0) {
      const doms = document.getElementsByClassName('selectItems')
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        dom.style.display = 'none'
      }
      doms[index].style.display = 'inline'

      const maskDom = document.getElementById('webview-dialog')
      maskDom.style.opacity = 1
      maskDom.style.pointerEvents = 'all'

      const dialogBox = document.getElementsByClassName('dialog-box')[0]
      dialogBox.className = 'dialog-box enter'
      return
      const selectItems = document.getElementById('selectItems')
      if (selectItems) {
        selectItems.parentNode.removeChild(selectItems);
      }
      let ul = document.createElement('ul')
      ul.id = 'selectItems'
      dialogBox.appendChild(ul)
      let list = selectList[parseInt(index)]
      list.forEach(element => {
        let li = document.createElement('li')
        li.className = 'dialog-box-item'
        li.innerHTML = element
        ul.appendChild(li)
      });
    }

    // 关闭弹窗
    function closeMask() {
      const maskDom = document.getElementById('webview-dialog')
      maskDom.style.opacity = 0
      maskDom.style.pointerEvents = 'none'
      const dialogBox = document.getElementsByClassName('dialog-box')[0]
      dialogBox.className = 'dialog-box close'

    }

    // 点击筛选项
    function activeItem() {
      if (event.path[0].className.indexOf('dialog-box-item') !== -1) {
        let fa = event.path[1]
        let selectItem = fa.getElementsByClassName('active-item')
        if (selectItem && selectItem.length > 0) {
          for (let i = 0; i < selectItem.length; i++) {
            const nodeChild = selectItem[i];
            nodeChild.className = 'dialog-box-item'
          }
        }

        const dom = event.path[0]
        dom.className = 'dialog-box-item active-item'

        let titleDoms = document.getElementsByClassName('search-select-item')
        let icon = `<div class="down-icon"> &#x25BC;</div>`
        let index = 0
        for (let i = 0; i < document.getElementsByClassName('selectItems').length; i++) {
          const doms = document.getElementsByClassName('selectItems')[i];
          if (doms.style.display === 'inline') {
            index = i
            break
          }
        }
        let oldName = ['企业状态', '行业类型', '经营地址类型']
        if (event.path[0].innerHTML === '全部') {
          titleDoms[index].innerHTML = oldName[index] + icon
          titleDoms[index].style.color = '#000'
        } else {
          titleDoms[index].innerHTML = event.path[0].innerHTML + icon
          titleDoms[index].style.color = '#3585d6'
        }
        let object = {}
        object[`slt${index + 1}Val`] = event.path[0].innerHTML
        searchSubmit(object)
      }
      event.stopPropagation();
    }

    // 输入框回车事件
    function iptEnter() {
      if (event.keyCode === 13) {
        let iptVal = event.path[0].value
        searchSubmit({
          iptVal
        })
      }
    }
  </script>
  <!-- 百度地图逻辑 -->
  <script type="text/javascript">
    // 点聚合
    let Maps = new BMap.Map("map", {
      minZoom: 12
    }) // 创建Map实例
    Maps.centerAndZoom(new BMap.Point(106.70, 26.53), 12)
    Maps.enableScrollWheelZoom(true)
    let arrs = [{
        lat: 26.501640336497424,
        lng: 106.66122379410332,
        companyName: '贵阳市经济开发区润色美发'
      },
      {
        lat: 26.497770380112463,
        lng: 106.6612369983627,
        companyName: '2'
      },
      {
        lat: 26.50130953025502,
        lng: 106.66129839786458,
        companyName: '3'
      },
      {
        lat: 26.499196144531698,
        lng: 106.66134275221276,
        companyName: '4'
      }
    ]
    let markers = []
    arrs.map(item => {
      let pt = new BMap.Point(parseFloat(item.lng), parseFloat(item.lat))
      markers.push(new BMap.Marker(pt, {
        title: item.companyName
      }))
    })
    new BMapLib.MarkerClusterer(Maps, {
      markers: markers
    })

    // 边界绘制
    let bdary = new BMap.Boundary();
    Maps.clearOverlays(); //清除地图覆盖物
    let count = jkqPoints.length; //行政区域的点有多少个
    if (count === 0) {
      alert('未能获取当前输入行政区域');
    } else {
      let pointArray = [];
      for (let i = 0; i < count; i++) {
        let ply = new BMap.Polygon(jkqPoints[i], {
          strokeWeight: 2,
          strokeColor: "#ff0000"
        }); //建立多边形覆盖物
        Maps.addOverlay(ply); //添加覆盖物
        pointArray = pointArray.concat(ply.getPath());
      }
      Maps.setViewport(pointArray); //调整视野
    }

    // 可视范围控制
    let b = new BMap.Bounds(new BMap.Point(106.548348,26.230511), new BMap.Point(106.8348,26.813543));
    try {
      BMapLib.AreaRestriction.setBounds(Maps, b);
    } catch (e) {
      alert(e);
    }
  </script>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.3.js 下载到自己的服务器 -->
  <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.2/index.js"></script>
  <script type="text/javascript">
    // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
    document.addEventListener('UniAppJSBridgeReady', function () {
      uni.postMessage({
        data: {
          action: 'message'
        }
      });
      uni.getEnv(function (res) {
        console.log('当前环境：' + JSON.stringify(res));
      });

      // document.querySelector('.btn-list').addEventListener('click', function (evt) {
      //   var target = evt.target;
      //   if (target.tagName === 'BUTTON') {
      //     var action = target.getAttribute('data-action');
      //     switch (action) {
      //       case 'switchTab':
      //         uni.switchTab({
      //           url: '/pages/tabBar/API/API'
      //         });
      //         break;
      //       case 'reLaunch':
      //         uni.reLaunch({
      //           url: '/pages/tabBar/component/component'
      //         });
      //         break;
      //       case 'navigateBack':
      //         uni.navigateBack({
      //           delta: 1
      //         });
      //         break;
      //       default:
      //         uni[action]({
      //           url: '/pages/component/button/button'
      //         });
      //         break;
      //     }
      //   }
      // });
      // document.getElementById('postMessage').addEventListener('click', function () {
      //   uni.postMessage({
      //     data: {
      //       action: 'message'
      //     }
      //   });
      // });
    });
  </script>
</body>

</html>